<route lang="json5" type="device">
{
  layout: 'tabbar',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'custom',
    navigationBarTitleText: '设备',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false
  },
}
</route>

<script lang="ts" setup>
import { getNavBarHeight, handleClick } from '@/utils/index'

const navBarHeight = getNavBarHeight()
// 获取环境变量
const COLOR_THEME = import.meta.env.VITE_APP_COLOR_THEME
const menu1 = [
  {
    title: '统计概览',
    icon: 'file-copy',
    url: '/pages-sub/finance/sbtj',
    bg: 'bg1',
  },
  {
    title: '支付日志',
    icon: 'play-circle-stroke',
    url: '/pages-sub/finance/payRecord',
    bg: 'bg2',
  },
  {
    title: '趋势图表',
    icon: 'evaluation',
    url: '',
    bg: 'bg3',
  },
  {
    title: '财务日志',
    icon: 'books',
    url: '/pages-sub/finance/cwRecord',
    bg: 'bg4',

  },
  {
    title: '购币日志',
    icon: 'evaluation',
    url: '/pages-sub/finance/buyRecord',
    bg: 'bg5',
  },
  {
    title: '支付投诉',
    icon: 'app',
    url: '',
    bg: 'bg6',
  },
  {
    title: '远程派币',
    icon: 'evaluation',
    url: '/pages-sub/finance/pbRecord',
    bg: 'bg7',
  },
  {
    title: 'AI币日志',
    icon: 'evaluation',
    url: '/pages-sub/finance/aibiRecord',
    bg: 'bg8',
  },
  {
    title: '存币日志',
    icon: 'file-copy',
    url: '/pages-sub/finance/cbiRecord',
    bg: 'bg1',
  },
  {
    title: '取币日志',
    icon: 'play-circle-stroke',
    url: '/pages-sub/finance/payRecord',
    bg: 'bg2',
  },
  {
    title: '彩票日志',
    icon: 'evaluation',
    url: '',
    bg: 'bg3',
  },
  {
    title: '收费说明',
    icon: 'books',
    url: '/pages-sub/finance/cwRecord',
    bg: 'bg4',

  },
]
const menu2 = [
  {
    title: '进件模板',
    desc: '快捷进件',
    icon: 'file-copy',
    url: '',
    color: '#07C160',
  },
  {
    title: '小微【国通】',
    desc: '创建小微商户',
    icon: 'usergroup',
    url: '',
    color: '#07C160',
  },
  {
    title: '小微【珑泽乐刷】',
    desc: '创建小微商户',
    icon: 'usergroup',
    url: '',
    color: '#07C160',
  },
  {
    title: '个体【珑泽乐刷】',
    desc: '创建个体商户',
    icon: 'user',
    url: '',
    color: '#07C160',
  },
  {
    title: '公司【珑泽乐刷】',
    desc: '创建公司商户',
    icon: 'home',
    url: '',
    color: '#07C160',
  },
  {
    title: '平台测试',
    desc: '已开通',
    icon: 'laptop',
    url: '',
    color: '#07C160',
  },
]
const menu3 = [
  {
    title: '小微【汇付】',
    icon: 'usergroup',
    url: '',
    color: '#07C160',
  },
  {
    title: '平台测试',
    icon: 'laptop',
    url: '',
    color: '#07C160',
  },
  {
    title: '对私收款',
    icon: 'creditcard',
    url: '',
    color: '#2a90ff',
  },
  {
    title: '珑泽【乐刷】',
    icon: 'creditcard',
    url: '',
    color: '#07C160',
  },
]
const menu4 = [
  {
    title: '投币图表',
    icon: 'chart-bubble',
    url: '',
    color: '#ffc107',
  },
  {
    title: '礼品图表',
    icon: 'gift',
    url: '',
    color: '#ffc107',

  },
  {
    title: '纸钞图表',
    icon: 'chart',
    url: '',
    color: '#ffc107',
  },
  {
    title: '投币日志',
    icon: 'view-module',
    url: '',
    color: '#6facfb',
  },
  {
    title: '礼品日志',
    icon: 'view-module',
    url: '',
    color: '#6facfb',

  },
  {
    title: '纸钞日志',
    icon: 'view-module',
    url: '',
    color: '#6facfb',
  },
]
const menu5 = [
  {
    title: '银行卡管理',
    icon: 'creditcard',
    url: '',
    color: '#5d6891',
  },
  {
    title: '微信管理',
    icon: 'chat',
    url: '',
    color: '#07C160',

  },
  {
    title: '支付宝管理',
    icon: 'bags',
    url: '',
    color: '#2a90ff',
  },
]
const menu6 = [
  {
    title: '分账账号',
    icon: 'play-circle-stroke',
    url: '',
    color: '#07C160',
  },
  {
    title: '分账日志',
    icon: 'file-copy',
    url: '',
    color: '#2a90ff',
  },
]

const query_sb_chked_rs = ref([])
const query_md_chked_rs = ref([])
const sbList = ref(['17800001', '17800002', '17800003', '17800004', '17800005', '17800006', '17800007', '17800001', '17800002', '17800003', '17800004', '17800005', '17800006', '17800007',
])

const storeList = ref(['上海和平路1', '上海和平路2', '上海和平路3', '上海和平路4', '上海和平路5', '上海和平路6', '上海和平路7'])

function handleChange({ value }) {
  console.log(value)
}
const dropMenu = ref()
const slider = ref() // slider 1.2.25支持
function confirm() {
  dropMenu.value.close()
}

function handleOpened() {
  slider.value?.initSlider()
}
</script>

<template>
  <view class="top-content" :style="{ paddingTop: `${navBarHeight}px` }">
    <view class="circle" />
    <view class="title">
      财务管理
    </view>
    <view class="desc">
      统计概览、支付日志、图表分析、财务日志、结算日志等...
    </view>
  </view>
  <view class="tag-list">
    <view class="flex justify-between">
      <wd-button :round="false" size="small" custom-class="btn-tag">
        上月
      </wd-button>
      <wd-button :round="false" size="small" custom-class="btn-tag">
        昨天
      </wd-button>
      <wd-button :round="false" size="small" custom-class="btn-tag">
        今天
      </wd-button>
      <wd-button :round="false" size="small" custom-class="btn-tag">
        本月
      </wd-button>
      <wd-button :round="false" size="small" custom-class="btn-tag">
        今年
      </wd-button>
      <wd-button :round="false" size="small" custom-class="btn-tag">
        自定义＞
      </wd-button>
    </view>
    <view class="timmer">
      查询时间 :2025/08/22 17:11 ~ 2025/08/22 17:11
    </view>
  </view>

  <view class="center-box wot-box">
    <wd-drop-menu class="drop-menu">
      <wd-drop-menu-item ref="dropMenu" title="按: 设备编号" @opened="handleOpened">
        <view class="drop-content">
          <view class="drop-label">
            设备编号（筛选）：
          </view>
          <view class="sb-type">
            <wd-checkbox-group v-model="query_sb_chked_rs" inline>
              <wd-checkbox v-for="(item, index) in sbList" :key="item" :model-value="item">
                <span class="sb-num">{{ item }}</span>
                <span v-if="index === 1" class="modify-num">{{ index === 1 ? item : '' }}</span>
              </wd-checkbox>
            </wd-checkbox-group>
          </view>
        </view>
      </wd-drop-menu-item>
      <wd-drop-menu-item ref="dropMenu" title="按: 门店 / 标签" @opened="handleOpened">
        <view class="drop-content">
          <view class="drop-label">
            门店（筛选）：
          </view>
          <view class="sb-type">
            <wd-checkbox-group v-model="query_md_chked_rs" inline>
              <wd-checkbox v-for="item in storeList" :key="item" :model-value="item">
                <span class="checkbox-label">{{ item }}</span>
              </wd-checkbox>
            </wd-checkbox-group>
          </view>
          <view class="drop-label">
            标签（筛选）：
          </view>
          <view class="sb-type">
            <wd-checkbox-group v-model="query_md_chked_rs" inline>
              <wd-checkbox v-for="item in storeList" :key="item" :model-value="item">
                <span class="checkbox-label">{{ item }}</span>
              </wd-checkbox>
            </wd-checkbox-group>
          </view>
          <view class="mt-20rpx text-24rpx text-#FAAB0C">
            <span class="text-bold"> 说明：</span><br>
            选择则：按指条件查询，不选择则：查询所有<br>
            如未添加标签、门店，则直接查询
          </view>
        </view>
      </wd-drop-menu-item>
    </wd-drop-menu>
    <view class="btn-box">
      <wd-button type="primary" size="small" block custom-class="primary-button">
        筛选查询
      </wd-button>
    </view>
    <view class="flex py-30rpx">
      <view class="row flex-1 text-center">
        通道收款
        <view class="text-60rpx">
          0.00<text class="text-24rpx">
            元
          </text>
        </view>
        <view class="text-#969799">
          结算金额
        </view>
      </view>
      <view class="row flex-1 text-center">
        测试收款
        <view class="text-60rpx">
          0.00<text class="text-24rpx">
            元
          </text>
        </view>
        <view class="text-#969799">
          可充值服务费
        </view>
      </view>
    </view>
    <view class="statistics">
      <view class="s-col">
        <view class="s-item">
          <view class="s-label">
            通道收款：
          </view>
          <view class="flex">
            <view class="num">
              0.00
            </view>元
          </view>
        </view>
        <view class="s-item">
          <view class="s-label">
            支付笔数：
          </view>
          <view class="flex">
            <view class="num">
              0
            </view>笔
          </view>
        </view>
        <view class="s-item">
          <view class="s-label">
            通道手续费：
          </view>
          <view class="flex">
            <view class="num">
              0.00
            </view>元
          </view>
        </view>
        <view class="s-item">
          <view class="s-label">
            支付服务费：
          </view>
          <view class="flex">
            <view class="num">
              0.00
            </view>元
          </view>
        </view>
        <view class="s-item">
          <view class="s-label">
            派币服务费：
          </view>
          <view class="flex">
            <view class="num">
              0.00
            </view>元
          </view>
        </view>
      </view>
      <view class="s-col">
        <view class="s-item">
          <view class="s-label">
            通道退款：
          </view>
          <view class="flex">
            <view class="num">
              0.00
            </view>元
          </view>
        </view>
        <view class="s-item">
          <view class="s-label">
            退款笔数：
          </view>
          <view class="flex">
            <view class="num">
              0
            </view>笔
          </view>
        </view>
        <view class="s-item">
          <view class="s-label">
            失败笔数：
          </view>
          <view class="flex">
            <view class="num">
              0
            </view>笔
          </view>
        </view>
        <view class="s-item">
          <view class="s-label">
            转服务费：
          </view>
          <view class="flex">
            <view class="num">
              0.00
            </view>元
          </view>
        </view>
      </view>
    </view>
    <view class="tips">
      备注：服务费可到：
      <navigator url="/pages/finance/payRecord" class="i-link">
        支付日志、
      </navigator>
      <navigator url="/pages/finance/buyRecord" class="i-link">
        购币日志、
      </navigator>
      <navigator url="/pages/finance/pbRecord" class="i-link">
        派币日志
      </navigator>
      里查看详情
    </view>
  </view>
  <wd-row class="wot-box">
    <wd-col :span="8">
      <view class="text-center text-32rpx">
        今日投币
        <view>0</view>
      </view>
    </wd-col>
    <wd-col :span="8">
      <view class="text-center text-32rpx">
        今日投币
        <view>0</view>
      </view>
    </wd-col>
    <wd-col :span="8">
      <view class="text-center text-32rpx">
        今日投币
        <view>0</view>
      </view>
    </wd-col>
  </wd-row>
  <view class="option-list pt60">
    <wd-row>
      <wd-col v-for="(item, index) in menu1" :key="index" :span="6">
        <view class="item" @click="handleClick(item)">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <view class="option-list thoroughfare">
    <view class="title">
      收款配置【通道】
    </view>
    <view class="desc">
      1.小微商户: 日收款:5W, 月收款:60W, 风控严厉;<br>
      2.个体商户: 日收款:5W, 月收款:60W, 风控中等;<br>
      3.企业商户: 日收款:200W, 月收款:不限, 风控较好;
    </view>
    <wd-row>
      <wd-col v-for="(item, index) in menu2" :key="index" :span="8">
        <view class="item">
          <wd-icon :name="item.icon" :color="item.color" size="60rpx" />
          <view class="menu-title">
            {{ item.title }}
          </view>
          <view class="menu-desc">
            {{ item.desc }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <view class="option-list thoroughfare">
    <view class="title">
      支付清算【通道】
    </view>
    <wd-row>
      <wd-col v-for="(item, index) in menu3" :key="index" :span="8">
        <view class="item">
          <wd-icon :name="item.icon" :color="item.color" size="60rpx" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>

  <view class="option-list thoroughfare">
    <view class="title">
      信号统计【输入】
    </view>
    <wd-row>
      <wd-col v-for="(item, index) in menu4" :key="index" :span="8">
        <view class="item">
          <wd-icon :name="item.icon" :color="item.color" size="60rpx" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>

  <view class="option-list">
    <view class="title">
      备用收款【可选】
    </view>
    <wd-row>
      <wd-col v-for="(item, index) in menu5" :key="index" :span="8">
        <view class="item">
          <wd-icon :name="item.icon" :color="item.color" size="60rpx" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <view class="option-list pt60">
    <wd-row>
      <wd-col v-for="(item, index) in menu6" :key="index" :span="8">
        <view class="item">
          <wd-icon :name="item.icon" :color="item.color" size="60rpx" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
</template>

<style lang="scss" scoped>
.pt60 {
  padding-top: 60rpx;
}

.tag-list {
  padding: 20rpx;
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 20rpx;

  .timmer {
    color: #646566;
    padding: 10rpx 0;
    text-align: center;
  }
}

.btn-tag {
  margin: 0 10rpx;
  background-color: $uni-color-primary !important;
}

.center-box {
  padding: 0 20rpx;
  background-color: #ffffff;
  padding-bottom: 20rpx;
  color: $uni-text-primary;
  .drop-content{
    padding: 20rpx 40rpx 40rpx;
    .sb-type{
      border-bottom: 1rpx solid #e2e2e2;
      padding-bottom: 20rpx;
    }
    .drop-label{
      padding: 20rpx 0;
      font-size: 28rpx;
      font-weight: bold;
      color: $uni-text-title;
    }
    .checkbox-label{
      color: $uni-text-primary;
      font-size: 24rpx;
    }
    .base-num {
      padding: 0 6rpx;
      border-radius: 4rpx;
      font-size: 24rpx;
    }
    .sb-num{
      @extend .base-num;
      background-color: #7232dd;
      color: #fff;

    }
    .modify-num {
      @extend .base-num;
      color:#c8c9cc;
      margin-left: 10rpx;
      border: 1rpx solid #c8c9cc;
    }
  }
  .btn-box {
    padding: 0 50rpx;
  }
}

.statistics {
  display: flex;
  justify-content: space-around;

  .s-col {
    width: 40%;

    .s-item {
      display: flex;
      padding-bottom: 5px;

      .s-label {
        width: 170rpx;
        text-align: right;
      }

      .num {
        background-color: $uni-color-orange;
        color: #fff;
        border-radius: 4rpx;
        padding: 0 4rpx;
        margin-right: 6rpx;
      }
    }

  }
}

.tips {
  font-size: 24rpx;
  color: #646566;
  padding: 7px 14px;
  .i-link {
    display: inline;
  }
}
.option-list {
  .desc {
    color: $uni-text-primary;
    font-size: 24rpx;
    line-height: 40rpx;
    text-align: left;
    padding-left: 40rpx;
    padding-bottom: 20rpx;
  }
}
.thoroughfare {
  .icon-circle {
    color: $uni-color-secondary;
    background-color: none;
    font-size: 60rpx;
  }
}
</style>
